<template>
    <div class="content">
        <h1 class="title">
            <slot name="title"></slot>
        </h1>
        <ul>
            <li>
                <div class="song-item">
                    <span class="item-index"></span>
                    <span class="item-title">歌曲名</span>
                    <span class="item-name">歌手</span>
                    <span class="item-intro">专辑</span>
                </div>
            </li>
            <li v-for="(item, index) in songList" :key="index">
                <div class="song-item" @click="toplay(item.id, item.url, item.pic, index, item.name, item.lyric)">
                    <span class="item-index">
                        {{index + 1}}
                    </span>
                    <span class="item-title">
                        {{lName(item.name)}}
                    </span>
                    <span class="item-name">
                        {{fName(item.name)}}
                    </span>
                    <span class="item-intro">
                        {{item.introduction}}
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
//import {mapGetters} from 'vuex';
import {mixin} from "../mixins/index";
    export default {
        name: "AlbumContent",
        mixins: [mixin],
        props: [
            'songList'
        ],
        methods:{
            fName(name){
                 //this.mixins.methods.replaceFName(name)
                let arr = name.split("-");
                return arr[0];
            },
            lName(name){
                 //this.mixins.methods.replaceLName(name)
                let arr = name.split("-");
                return arr[1];
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../assets/css/album-content";
</style>